<template>
  <div>
    <!-- 文章详情页面 -->
    <Header></Header>

    <!-- 体部 -->
    <div class="center_list">
      <div class="wrapper">
        <div class="title">
          {{ article.title }}
        </div>
        <div class="author">
          <span>发布时间：{{article.publishTime | fmtDate}}</span>
          <span>作者：{{author.realname}}</span>
          <span>阅读量：{{article.readTimes}}</span>
        </div>
        <div v-html="article.content" class="list_content">
          
        </div>
      </div>
    </div>
    <!-- /体部 -->

    <!-- 二维码 -->
      <div class="code">
        <div class="wrapper">
          <div class="top">
            【<span>打印本页</span>】
            【<span>关闭窗口</span>】
          </div>
          <div class="bottom">
            <span>扫一扫在手机打开当前页</span>
            <img src="@/assets/yxtx/code.png" alt="">
          </div>
        </div>
      </div>
    <!-- /二维码 -->
    <Footer></Footer>
  </div>
</template>
<script>
import { get } from "@/utils/request";
export default {
  data() {
    return {
      id: "",
      article: {},
      author:{}
    };
  },
  created() {
    this.id = this.$route.query.id;
    this.getArticleById();
  },
  methods: {
    //根据文章id 获取对应得文章
    async getArticleById() {
      let res = await get("/index/article/findById", { id: this.id });
      console.log(res, "获取响应");
      this.article = res.data;
      this.author=res.data.baseUser;
      // {id,title,content}
    },
  },
};
</script>
<style lang="scss">
  // 文章详情样式
.center_list {
  .title {
    font-size: 24px;
    text-align: center;
    color: #333333;
    font-weight: bold;
    margin: 25px 0;
  }
  .author{
    text-align: center;
    line-height: 35px;
    background: #f5f5f5;
    margin-bottom: 25px;
    span{
      display: inline-block;
      margin-left: 20px;
      color: black;
      // margin-bottom: 25px;
    }
  }
  .list_content{
    font-size: 16px;
    color: #333333;
  }
}

// 二维码样式
.code{
  margin-top: 50px;
  margin-bottom: 25px;
  .wrapper{
    .top{
      text-align: right;
      font-size: 14px;
      color: #757575;
      background: #f5f5f5;
      span{
        cursor: pointer;
      }
      span:hover{
        color: #be5b24;
      }
    }
    .bottom{
      span{
        display: block;
        text-align: center;
        padding: 15px;
        color: black;
        font-size: 14px;
      }
      img{
        // text-align: center;
        margin-left: 43%;
      }
    }
  }
}
</style>